<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>0512-js作业-全选列表-螺旋-修改</title>
    <style>
        html{font-family: "Microsoft YaHei";}
        ul,p{margin: 0;padding: 0;list-style:none;}
        a{text-decoration: none;}
        body{
            margin: 0;
            cursor: default;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .wrap{
            margin: 20px auto;
            width: 300px;
        }
        .wrap ul{
            width: 100%;
        }
        .wrap ul li,.wrap p{
            padding-left: 40px;
            width: 100%;
            height: 35px;
            background: url("images/ck.png") no-repeat 10px center/20px;
            line-height: 35px;
            cursor: pointer;
            box-sizing: border-box;
        }
        .wrap .cked{
            background: url("images/cked.jpg") no-repeat 10px center/20px;
        }
        .wrap ul li{
            border-bottom: 1px solid #fff;
        }
        .wrap ul li:nth-child(even){
            background-color: #1b75ff;
        }
        .wrap ul li:nth-child(odd){
            background-color: #64a4ff;
        }
    </style>
</head>
<body>
    <section class="wrap">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>666</li>
            <li>777</li>
        </ul>
        <p>全选</p>
    </section>
</body>
<script type="text/javascript">
    var oli = document.getElementsByTagName('li'),
        op = document.getElementsByTagName('p');
    var boolp = true;
    var a = 0;

    for(var i = 0;i<oli.length;i++){
        oli[i].num = i;
        oli[i].bool = true;
        oli[i].onmouseenter = function(){
            oli[this.num].style = "background-color: #f60;";
        };
        oli[i].onmouseleave = function(){
            oli[this.num].style = "";
        };
        oli[i].onclick = function(){
            if(this.bool){
                oli[this.num].className = "cked";
                this.bool = false;
                a++
            }else{
                oli[this.num].className = "";
                this.bool = true;
                a--
            };
            // console.log(a);
            if(a === 7){
                op[0].className = "cked";
                boolp = false;
            }else{
                op[0].className = "";
                boolp = true;
            };
        };
    };
    op[0].onclick = function(){
        if(boolp){
            for(var k = 0;k<oli.length;k++){
                oli[k].className = "cked";
                oli[k].bool = false;
            };
            op[0].className = "cked";
            boolp = false;
            a = 7;
        }else{
            for(var k = 0;k<oli.length;k++){
                oli[k].className = "";
                oli[k].bool = true;
            };
            op[0].className = "";
            boolp = true;
            a = 0;
        };
        // console.log(a);
    };
</script>
</html>